import React from 'react'
import Input from '../input'
import Select from '../select'
import style from './style'
import {FieldContainer, FieldBox} from '../form'


export default
class extends React.Component {

  static propsType = {
    label: React.PropTypes.string,
    fetch: React.PropTypes.func.required,
    onChange: React.PropTypes.func.required,
    value: React.PropTypes.object
  }

  constructor(props) {
    super(props)
    let { value } = props
    const { fetch } = props
    if (typeof value === 'string') {
      value = JSON.parse(value)
    } else {
      value = {}
    }
    const { 
      detail='', 
      province='', 
      city='', 
      area='' 
    } = value

    this.state = {
      province,
      city,
      area,
      detail
    }

    if (province) fetch(province)
    if (city) fetch(city)
  }

  update() {
    this.props.onChange(this.state)
  }

  handleInputChange(e) {
    this.setState({
      detail: e.target.value
    }, this.update)
  }

	changeArea(e) {
		const cur = e.target.value
		this.setState({
			area: cur
		}, this.update)
	}

	changeCity(e) {
		const cur = e.target.value
		if (cur !== '') this.props.fetch(cur)
		this.setState({
			city: e.target.value,
			area: ''
		}, this.update)
	}

	changeProvince(e) {
		const cur = e.target.value
		if (cur !== '') this.props.fetch(cur)
		this.setState({
			province: cur,
			city: '',
			area: ''
		}, this.update)
	}

	renderProvince() {
		const provinces = this.props.addresses[1] || []
		return (
      <div style={{width: 80}}>
  			<Select 
  				value={this.state.province}
          width={'100%'}
  				onChange={::this.changeProvince}
          disabled={this.props.disabled}
  			>
  				<option value="">选择省份..</option>
  				{
  					provinces.map((v, i) => (
  						<option value={v.regionId} key={i}>{ v.regionName }</option>
  					))
  				}
  			</Select>
      </div>
		)
	}

	renderCity() {
		const cities = this.props.addresses[this.state.province] || []
		return (
      <div style={{width: 100}}>
  			<Select 
  				value={this.state.city}
          width={'100%'}
  				onChange={::this.changeCity}
          disabled={this.props.disabled}
          
  			>
  				<option value=''>选择城市..</option>
  				{
  					cities.map((v, i) => (
  						<option key={i} value={v.regionId}>{ v.regionName }</option>
  					))
  				}
  			</Select>
      </div>
		)
	}

	renderArea() {
		const areas = this.props.addresses[this.state.city] || []
		return (
      <div style={{width: 120}}>
  			<Select 
  				value={this.state.area}
          width={'100%'}
          disabled={this.props.disabled}
  				onChange={::this.changeArea}
  			>
  				<option value=''>选择区域..</option>
  				{
  					areas.map((v, i) => (
  						<option key={i} value={v.regionId}>{ v.regionName }</option>
  					))
  				}
  			</Select>
      </div>
		)
	}

  render() {
    const {
      label,
      name,
      required,
      disabled
    } = this.props;
    return (
      <FieldBox
        label={label}
        name={name}
        required={required}
      >
        <div
          data-role="address"
          className={style.root}
        >
          <div className={style.region}>
            { this.renderProvince() }
            { this.renderCity() }
            { this.renderArea() }
          </div>
          <Input 
            className={style.input}
            value={this.state.detail}
            onChange={::this.handleInputChange}
            placeholder={"详情地址"}
            disabled={disabled}
          />
        </div>
      </FieldBox>
    )
  }
}
